<template>
  <el-card class="upload-card">
    <div class="upload-row">
      <div class="upload-prompt">
        <h2 class="title">请上传玉米叶片图片:</h2>
      </div>
      <div class="upload-box">
        <el-upload
            class="upload-demo"
            drag
            action=""
            :http-request="uploadImage"
            :show-file-list="false"
        >
          <div class="upload-content">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">拖拽图片或<em>点击上传</em></div>
          </div>
        </el-upload>
      </div>
    </div>
    <transition name="fade">
      <div v-if="preview" class="preview">
        <div class="preview-header">
          <span>图片预览</span>
          <el-button size="small" @click="clearPreview">清除</el-button>
        </div>
        <img :src="preview" alt="预览图" />
      </div>
    </transition>
  </el-card>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
  name: 'UploadCard',
  emits: ['result'],
  data() {
    return {
      preview: null
    }
  },
  methods: {
    clearPreview() {
      if (this.preview) {
        URL.revokeObjectURL(this.preview)
      }
      this.preview = null
    },
    async uploadImage(option) {
      const file = option.file
      this.clearPreview()
      this.preview = URL.createObjectURL(file)
      const formData = new FormData()
      formData.append('file', file)
      try {
        const [t2tResult, vitLiteResult, vitBaseResult] = await Promise.all([
          axios.post('http://localhost:8001/predictt2t', formData),
          axios.post('http://localhost:8001/predictlite', formData),
          axios.post('http://localhost:8001/predictbase', formData)
        ])
        const labelMap = {
          blight: '枯萎病',
          common_rust: '普通锈病',
          gray_spot: '灰斑病',
          spray: '药害'
        }
        const transformedData = {
          prediction: labelMap[t2tResult.data.prediction] || t2tResult.data.prediction,
          confidence: t2tResult.data.confidence,
          elapsed_ms: t2tResult.data.elapsed_ms,
          t2tProbabilities: this.mapKeysToChinese(t2tResult.data.probabilities, labelMap),
          vitLiteProbabilities: this.mapKeysToChinese(vitLiteResult.data.probabilities, labelMap),
          vitBaseProbabilities: this.mapKeysToChinese(vitBaseResult.data.probabilities, labelMap)
        }
        this.$emit('result', transformedData)
      } catch (error) {
        console.error('上传失败:', error)
        ElMessage.error('图片上传失败，请重试')
      }
    },
    mapKeysToChinese(probabilities, labelMap) {
      return Object.keys(probabilities).reduce((acc, key) => {
        const chineseKey = labelMap[key] || key
        acc[chineseKey] = probabilities[key]
        return acc
      }, {})
    }
  }
}
</script>

<style scoped>
.upload-card {
  border-radius: 0.75rem;
  box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  padding: 1rem;
  width: 50vw;
  position: fixed;
  top: 17vh;
  left: 25vw;
}
.upload-card:hover {
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}
.upload-row {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
.upload-prompt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  color: #2c6e49;
  font-weight: 600;
  font-size: 1.4rem;
  text-align: center;
}
.upload-box {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-box .el-upload {
  width: 100%;
  min-height: 10rem;
}
.upload-content {
  text-align: center;
}
:deep(.el-upload-dragger) {
  background-color: #f8fff6;
  border: 0.125rem dashed #4caf50;
  border-radius: 0.625rem;
  padding: 1.875rem;
  transition: all 0.3s ease;
}
:deep(.el-upload-dragger:hover) {
  background-color: #edf8e9;
  border-color: #2c6e49;
}
:deep(.el-icon-upload) {
  font-size: 3.75rem;
  color: #4caf50;
  margin-bottom: 0.9375rem;
}
:deep(.el-upload__text) {
  font-size: 1rem;
  color: #555;
}
:deep(.el-upload__text em) {
  color: #2c6e49;
  font-style: normal;
  font-weight: 500;
}
.el-upload__tip {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: #888;
  text-align: center;
}
.preview {
  margin-top: 1.5625rem;
  border-radius: 0.625rem;
  overflow: hidden;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  background: #fff;
  width: 30vw;
  position: fixed;
  top: 31vh;
  left: 25vw;
}
.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0.9375rem;
  background: #f0f7ee;
  border-bottom: 1px solid #e4efe0;
  font-weight: 500;
  color: #2c6e49;
}
.preview img {
  display: block;
  max-width: 100%;
  max-height: 30vh;
  margin: 0 auto;
  padding: 0.9375rem;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
